import React from 'react';
import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
import { t } from 'react-native-tailwindcss';
import IconFont from '../assets/iconfont';

import { navigate } from '../routers/navigationRef';
import screen from '../utils/screen';
import commonStyle from '../../src/styles';
const NavButtons = ({ onPress, listData, showTitle }) => (
  <>
    <View>
      <View style={[styles.navi_title, showTitle ? t.flex : t.hidden]}>
        <View style={styles.wire} />
        <Text style={[styles.f28B]}>{listData.name}</Text>
      </View>
      <View style={styles.carRoomItems}>
        {listData.child.map((item_i, index_i) => {
          return (
            <TouchableOpacity
              style={[styles.carRoomItem]}
              key={index_i}
              onPress={() =>
                navigate(item_i.url ? item_i.url : 'MaintainIndex')
              }>
              <IconFont name={item_i.icon} size={32} />
              <Text style={styles.titleText}>{item_i.name}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  </>
);

const styles = StyleSheet.create({
  navi_title: {
    ...commonStyle.navi_title,
  },
  carRoom_title_text: {
    ...commonStyle.carRoom_title_text,
  },
  wire: {
    ...t.w1,
    ...t.h6,
    ...t.roundedTSm,
    ...t.mR3,
    ...t.bgThemeBlue,
  },
  carRoomItems: {
    ...t.flex,
    ...t.flexWrap,
    ...t.bgWhite,
    ...t.flexRow,
    ...t.mB6,
  },
  carRoomItem: {
    ...commonStyle.flexCenterXY,
    ...t.flexCol,
    ...t.w1_4,
    height: screen.EH * 116,
    ...t.mY3,
  },
  titleText: {
    ...t.text2xl,
    ...t.fontBold,
    ...t.mT1,
  },
  f28B: {
    ...commonStyle.f28B,
  },
});
export default NavButtons;
